{% extends "article/base.html" %}

{% load staticfiles %}

{% block title %}文章标签{% endblock %}

{% block content %}
    <div>
        <p>添加文章标签</p>
        <form class="form-horizontal" action="." method="post">{% csrf_token %}
            <div class="row" style="margin-top: 10px;">
                <div class="col-md-2 text-right"><span>文章标签</span></div>
                <div class="col-md-10 text-left">{{ article_tag_form.tag }}</div>
            </div>
            <div class="row">
                <input type="button" class="btn btn-primary btn-lg" style="margin-left:200px; margin-top:10px;"
                       value="添加" onclick="add_tag()">
            </div>
        </form>
    </div>
    <div>
        <p>已有标签列表</p>
        <table class="table table-hover">
            <tr>
                <td>序号</td>
                <td>文章标签</td>
                <td>操作</td>
            </tr>
            {#    	{% for article_tag in article_tags %}#}
            {#    	<tr id={{ forloop.counter }}>#}
            {#    		<td>{{ forloop.counter }}</td>#}
            {#    		<td>{{ article_tag.tag }}</a></td>#}
            {#    		<td>#}
            {#    		    <a nane="delete" href="javascript:" onclick="del_tag(this, {{ article_tag.id }})"><span class="glyphicon glyphicon-trash"></span></a>#}
            {#    		</td>#}
            {#    	</tr>#}
            {#    {% empty %}#}
            {#    	<p>You have no article tags. Please add them.</p>#}
            {#    	{% endfor %}#}
        </table>
    </div>
    <script type="text/javascript" src='{% static "js/jquery.js" %}'></script>
    <script type="text/javascript" src="{% static 'js/layer.js' %}"></script>
    <script type="text/javascript">
        function add_tag() {
            tag = $("#id_tag").val();
            $.ajax({
                url: '{% url "article:article_tag" %}',
                type: "POST",
                data: {"tag": tag},
                success: function (e) {
                    if (e == "1") {
                        layer.msg("You have added a new tag.");
                        window.location.reload();
                    } else {
                        layer.msg(e)
                    }
                }
            });
        }

        function del_tag(the, tag_id) {
            var article_tag = $(the).parents("tr").children("td").eq(1).text();
            layer.open({
                type: 1,
                skin: "layui-layer-rim",
                area: ["400px", "200px"],
                title: "删除文章标签",
                content: '<div class="text-center" style="margin-top:20px"><p>是否确定删除文章标签《' + article_tag + '》</p></div>',
                btn: ['确定', '取消'],
                yes: function () {
                    $.ajax({
                        url: '{% url "article:del_article_tag" %}',
                        type: "POST",
                        data: {"tag_id": tag_id},
                        success: function (e) {
                            if (e == "1") {
                                parent.location.reload();
                                layer.msg("The tag has been deleted.");
                            } else {
                                layer.msg("删除失败");
                            }

                        },
                    })
                },
            });
        }

    </script>
{% endblock %}
